<template>
  <div class="OrderDetails">
    <div class="wrapper">
      <div class="header">
        <div @click="go" class="header_left iconfont icon-guanbi"></div>
        <div class="header_center">订单详情</div>
        <div class="header_right"></div>
      </div>
      <div class="Status">
        <p>订单状态</p>
        <p>待付款</p>
      </div>

      <div class="package">
        <div class="title">购买套餐</div>
        <div class="packageName">
          <div class="packageName_left leftone">{{ packageName }}</div>
          <div class="packageName_right">￥{{ price }} x 1份</div>
        </div>
        <div class="packageName">
          <div class="packageName_left">{{ popitemName }}</div>
          <div class="packageName_right">{{ value }}间</div>
        </div>
        <div class="packageName">
          <div class="packageName_left">
            入住日期 {{ dateone }} 离店日期 {{ datetwo }}
          </div>
          <div class="packageName_right">{{ num }}晚</div>
        </div>
      </div>

      <div class="cost">
        <div class="title">应付金额</div>
        <div class="money">￥{{ price * num * value }}</div>
      </div>

      <div class="PurchaseInstructions">
        <h3>购买须知</h3>
        <h5 class="important">【防疫政策】</h5>
        <p>
          中高风险地区不接待，来自深圳的客人需要24小时核酸+到达从化马上做—次核酸+绿码才可以入住,其他地区48小时核酸+绿码入住
        </p>
        <h5>【使用方式】</h5>
        <p>
          办理入住方式:请携带个人有效身份证件（一人一证)，在酒店前台报姓名、手机号入住。
        </p>
        <h5>【套餐消费限制】</h5>
        <div class="lookmore" v-show="look">
          <p>
            每日15:00之后入住(具体视酒店当天入住率而定),次日12:00之前退房，超时将加收房费，当天18:00之前收取半天房费，18:00之后收取全天房费。
          </p>
          <p>
            入住时需交住房押金(具体金额以办理入住时酒店公布为准)，退房时如无物品损坏或其它消费，押金将如数退还。
          </p>
          <p>
            每间房最多2名成人入住，1.2m(不含)以下儿童不占床位免费，如需加床,平日300/张，周末500/张(床型为1.2m，婴儿床免费)。
          </p>
          <p>
            为保证您和其他旅客的安全，和良好的睡眠质量，请您不要携带宠物入住。
          </p>
          <h5>【额外服务提示】</h5>
          <p>酒店提供免费停车,停车位先到先得。</p>
          <h5>【安全提示】</h5>
          <p>旅游出行有风险,建议您自行购买相关保险。</p>
          <p>
            为提高游客的出行安全意识，普及旅游基本安全常识，减少安全事故的发生，请您在预订产品前，仔细阅读《要出发旅游安全手册》并在旅游过程中严格遵守各项安全注意事项，保障您拥有一个愉快的旅程。
          </p>
          <h5>【价格说明】</h5>
          <p>
            本平台展示的商品划横线价格为顾客参考价格，该价格可能是景区/酒店等终端产品提供方曾经的门市价、挂牌价或该商品在其他平台上曾经展示过的销售价,不具备原价的含义,该价格仅供您参考。
          </p>
          <p>到手价为使用优惠券和红包(积分)后支付的价格。</p>
          <p>分享券后价为使用分享券和红包（积分)后支付的价格。</p>
        </div>
        <div class="lookup" v-show="!look" @click="look = true">查看全部</div>
      </div>

      <p class="space"></p>

      <div class="contacts">
        <p><strong>联系人信息</strong></p>
        <van-field
          v-model="name"
          placeholder="建议填写真实姓名"
          label="联系人："
        />
        <van-field
          v-model="tel"
          placeholder="接收确认短信"
          type="tel"
          label="手机号："
        />
        <van-field
          v-model="text"
          placeholder="请填写其他要求，如指定门票"
          label="备注："
        />
      </div>

      <p class="space"></p>

      <div class="payment">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <div class="zfb">
              <img :src="require('../assets/img/ic_zfb_big.webp')" alt="" />
              <van-cell title="支付宝 （优选）" clickable @click="radio = '1'">
                <template #right-icon>
                  <van-radio name="1" />
                </template>
              </van-cell>
            </div>
            <div class="zfb">
              <img :src="require('../assets/img/ic_wx_pay.webp')" alt="" />
              <van-cell title="微信" clickable @click="radio = '2'">
                <template #right-icon>
                  <van-radio name="2" />
                </template>
              </van-cell>
            </div>
          </van-cell-group>
        </van-radio-group>
      </div>

      <div class="tab">
        <button @click="del">取消订单</button>
        <button @click="pay">立即支付</button>
      </div>
      <van-dialog
        v-model="show"
        title="提示"
        show-cancel-button
        @confirm="onconfirm"
      >
        <p class="check">确定取消订单？</p>
      </van-dialog>
      <van-dialog
        v-model="payer"
        title="提示"
        show-cancel-button
        @confirm="confirmers"
      >
        <p class="check">确定支付订单？</p>
      </van-dialog>
      <van-loading type="spinner" color="#000" v-show="loading" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      payer: false,
      look: false,
      loading: false,
      radio: "1",
      name: "",
      tel: "",
      text: "",
      packageName: null,
      value: null,
      title: "",
      num: null,
      price: null,
      dateone: null,
      datetwo: null,
      popitemName: null,
      index: null,
      orderDetail: null,
      Detail: null,
      allorder: null,
      Togo: null,
    };
  },
  methods: {
    go() {
      this.$router.push("/myorder?title="+this.title);
    },
    del() {
      this.show = true;
    },
    onconfirm() {
      this.loading = true;
       if (JSON.parse(localStorage.getItem("allorder")) == null) {
        this.allorder = [];
        console.log(this.allorder);
        this.allorder.push({
          bigtitle: this.orderDetail.bigtitle,
          packageName: this.orderDetail.packageName,
          value: 0,
          num: 0,
          price:0,
          dateone: this.orderDetail.dateone,
          productImg: this.orderDetail.productImg,
          datetwo: this.orderDetail.datetwo,
          popitemName: this.orderDetail.popitemName,
        });
        window.localStorage.setItem("allorder", JSON.stringify(this.allorder));
      } else {
        console.log(this.allorder);
        this.allorder.push({
          bigtitle: this.orderDetail.bigtitle,
          packageName: this.orderDetail.packageName,
          value: 0,
          num: 0,
          price: 0,
          dateone: this.orderDetail.dateone,
          productImg: this.orderDetail.productImg,
          datetwo: this.orderDetail.datetwo,
          popitemName: this.orderDetail.popitemName,
        });
        window.localStorage.setItem("allorder", JSON.stringify(this.allorder));
      }
      setTimeout(() => {
        this.loading = false;
        this.$toast("取消订单成功");
        this.$router.push("/my")
      }, 2000);
      console.log(this.Detail);
      this.Detail.splice(this.index,1);
      window.localStorage.setItem("Tobepaid", JSON.stringify(this.Detail));
    },
    pay() {
      this.payer = true;
    },
    confirmers() {
      if(this.name!='' && this.tel!=''){

      
      this.loading = true;
      
      console.log(this.allorder);
        if (JSON.parse(localStorage.getItem("allorder")) == null) {
        this.allorder = [];
        console.log(this.allorder);
        this.allorder.push({
          bigtitle: this.orderDetail.bigtitle,
          packageName: this.orderDetail.packageName,
          value: this.orderDetail.value,
          num: this.orderDetail.num,
          price: this.orderDetail.price,
          dateone: this.orderDetail.dateone,
          productImg: this.orderDetail.productImg,
          datetwo: this.orderDetail.datetwo,
          popitemName: this.orderDetail.popitemName,
        });
        window.localStorage.setItem("allorder", JSON.stringify(this.allorder));
      } else {
        console.log(this.allorder);
        this.allorder.push({
          bigtitle: this.orderDetail.bigtitle,
          packageName: this.orderDetail.packageName,
          value: this.orderDetail.value,
          num: this.orderDetail.num,
          price: this.orderDetail.price,
          dateone: this.orderDetail.dateone,
          productImg: this.orderDetail.productImg,
          datetwo: this.orderDetail.datetwo,
          popitemName: this.orderDetail.popitemName,
        });
        window.localStorage.setItem("allorder", JSON.stringify(this.allorder));
      }
        if (JSON.parse(localStorage.getItem("Togo")) == null) {
        this.Togo = [];
        console.log(this.Togo);
        this.Togo.push({
          bigtitle: this.orderDetail.bigtitle,
          packageName: this.orderDetail.packageName,
          value: this.orderDetail.value,
          num: this.orderDetail.num,
          price: this.orderDetail.price,
          dateone: this.orderDetail.dateone,
          productImg: this.orderDetail.productImg,
          datetwo: this.orderDetail.datetwo,
          popitemName: this.orderDetail.popitemName,
        });
        window.localStorage.setItem("Togo", JSON.stringify(this.Togo));
      } else {
        console.log(this.Togo);
        this.Togo.push({
          bigtitle: this.orderDetail.bigtitle,
          packageName: this.orderDetail.packageName,
          value: this.orderDetail.value,
          num: this.orderDetail.num,
          price: this.orderDetail.price,
          dateone: this.orderDetail.dateone,
          productImg: this.orderDetail.productImg,
          datetwo: this.orderDetail.datetwo,
          popitemName: this.orderDetail.popitemName,
        });
        window.localStorage.setItem("Togo", JSON.stringify(this.Togo));
      }
    //   console.log("确定",this.orderDetail);
      console.log(this.index);
      console.log("确定",this.Detail);
      this.Detail.splice(this.index,1);
      console.log("确定删除",this.Detail);
      window.localStorage.setItem("Tobepaid", JSON.stringify(this.Detail));
      setTimeout(() => {
        this.loading = false;
        this.$toast("支付成功");
        this.$router.push("/my")
      }, 2000);
      }else{
        this.$toast("联系人或手机号不能为空")
      }
    },
  },
  created(){
    // this.packageName=this.$route.query.packageName
    // this.value=this.$route.query.value
    // this.num=this.$route.query.num
    // this.price=this.$route.query.price
    // this.dateone=this.$route.query.dateone
    // this.datetwo = this.$route.query.datetwo;
    // this.popitemName = this.$route.query.popitemName;
    this.index = this.$route.query.index;
    this.title = this.$route.query.title;
    this.Detail=this.orderDetail = JSON.parse(localStorage.getItem("Tobepaid"));
    this.allorder = JSON.parse(localStorage.getItem("allorder"));
    this.Togo = JSON.parse(localStorage.getItem("Togo"));
    // this.Detail =this.orderDetail;
    console.log("chushi",this.Detail);
    console.log("chushi",this.orderDetail);
    console.log(this.orderDetail[this.index]);
    this.orderDetail = this.orderDetail[this.index];
    this.packageName = this.orderDetail.packageName;
    this.value = this.orderDetail.value;
    this.num = this.orderDetail.num;
    this.price = this.orderDetail.price;
    this.dateone = this.orderDetail.dateone;
    this.datetwo = this.orderDetail.datetwo;
    this.popitemName = this.orderDetail.popitemName;
  },
};
</script>

<style lang="scss" scoped>
.OrderDetails {
  height: 100%;
  .wrapper {
    height: 100%;
    background-color: #f0eee2;
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    .header {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 1;

      .header_left {
        color: #fc9632;
        font-size: 20px;
        line-height: 50px;
      }
      .header_center {
        font-size: 18px;
      }
      .header_right {
        width: 20px;
      }
    }
    .Status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      height: 50px;
      font-size: 18px;
      padding: 0 16px;
      margin-bottom: 10px;
      p {
        &:nth-child(1) {
          color: #565238;
        }
        &:nth-child(2) {
          color: #ff0000;
          font-weight: bold;
        }
      }
    }
    .package {
      background-color: #fff;
      padding: 0 16px 10px;
      font-size: 15px;
      margin-bottom: 10px;
      .title {
        color: #787562;
        padding-top: 10px;
        line-height: 30px;
      }
      .packageName {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 5px 0;
        div.leftone {
          width: 250px;
        }
        .packageName_left {
          width: 300px;
          color: #312e1b;
        }
        .packageName_right {
          color: #fc9632;
        }
      }
    }
    .cost {
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      padding: 0 16px;
      height: 50px;
      margin-bottom: 10px;
      .title {
        color: #565238;
      }
      .money {
        color: #ff0000;
        font-weight: bold;
      }
    }
    .PurchaseInstructions {
      background-color: #fff;
      padding: 10px 16px;
      h3 {
        color: #3c3c3a;
      }
      h5 {
        height: 50px;
        line-height: 50px;
        color: #3c3c3a;
      }
      h5.important {
        color: #ed0019;
      }
      p {
        color: #76716d;
        font-size: 14px;
        padding: 9px;
      }
      .lookup {
        width: 100%;
        height: 50px;
        line-height: 50px;
        color: #412a15;
        font-weight: bold;
        border-top: 1px solid #ccc;
        text-align: center;
      }
    }
    p.space {
      background-color: #f0eee2;
      height: 10px;
    }
    .contacts {
      padding: 0 16px;
      p {
        padding: 10px 0;
      }
      .van-cell {
        padding: 10px 0;
      }
    }
    .payment {
      margin-top: 15px;
      padding: 0 16px 60px;
      .zfb {
        display: flex;
        align-items: center;
        img {
          width: 25px;
          height: 25px;
        }
      }
    }
    .tab {
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      height: 52px;
      width: 100%;
      padding: 1px 0;
      background-color: #fff;
      align-items: center;
      justify-content: space-between;
      button {
        width: 236px;
        color: #fff;
        background-color: #ff9100;
        height: 52px;
        border: 0;
        &:nth-child(1) {
          color: #ff9100;
          background-color: #fff;
          border: 1px solid #ff9100;
        }
      }
    }
    p.check {
      text-align: center;
      line-height: 50px;
    }
    .van-loading {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>